import React,{useEffect,useState} from 'react';
import '../../../assets/css/cinema.css'
// 引入接口
import {CinemaLocation} from '@/api/cinema'
const Index = () => {
    // const [locationArr, setlocationArr] = useState([]);
    useEffect(() => {
        // 调用接口
        CinemaLocation().then(res=>{
            console.log('影院地址',res);
            if(res.data.errNo==0){
                // setlocationArr(res.data.paginate.slice(0,99))
                // const locationArr = res.data.paginate.slice(0,99)
                // console.log('locationArr',locationArr);
                //react中必须加window
                var map = new window.BMapGL.Map("container"); // 创建地图实例
                var point = new window.BMapGL.Point(116.404, 39.915);  // 创建点坐标
                map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                map.setHeading(64.5);   //设置地图旋转角度
                map.setTilt(73);       //设置地图的倾斜角度
                res.data.paginate.slice(0,99).map(item=>{
                    var point = new  window.BMapGL.Point(item.gpsaddress.split(',')[0], item.gpsaddress.split(',')[1]);   
                    var marker = new  window.BMapGL.Marker(point);// 创建标注   
                    map.addOverlay(marker);   // 将标注添加到地图中
                    // 创建信息窗口
                    var opts = {
                        width: 200,
                        height: 100,
                        title: '当前位置'
                    };
                    // 需要用逆地址解析，将经纬度解析为详细地址
                    var myGeo = new window.BMapGL.Geocoder();
                    // 将地址解析结果显示在地图上，并调整地图视野
                    myGeo.getLocation(new window.BMapGL.Point(item.gpsaddress.split(',')[0], item.gpsaddress.split(',')[1]), function(result){      
                        if (result){      
                            var infoWindow = new window.BMapGL.InfoWindow(result.address, opts);
                            // 点标记添加点击事件
                            marker.addEventListener('click', function () {
                                map.openInfoWindow(infoWindow, point); // 开启信息窗口
                            });   
                        }      
                    });
                })
                        }
                    })

        }, []);

    return (
        <div id='container'>
            影院管理

        </div>
    );
}

export default Index;
